<template>
  <div class="text-content">
    <button @click="add">新增</button>
    <button @click="deleteLast">删除</button>
    <article-chunk
        v-for="(article, index) of articles"
        :article="article"
        :index="index"
        :key="article.id"></article-chunk>
  </div>
</template>

<script>
import {mapMutations, mapActions, mapState} from 'vuex';
import ArticleChunk from "@/components/ArticleChunk";

export default {
  name: "ContentArea",
  components: {
    ArticleChunk,
  },
  computed: {
    ...mapState({
      articles: state => state.article.articles,
    })
  },
  methods: {
    ...mapMutations({
      addArticle: 'article/addArticle',
      deleteArticle: 'article/deleteArticle'
    }),
    ...mapActions({
      addArticleAction: 'article/addArticleAction',
      deleteArticleAction: 'article/deleteArticleAction'
    }),
    add() {
      let obj = {id: 8, title: 'javascript', description: '...', content: '.....', date: '2018-3-7'};
      this.addArticleAction(obj);
    },
    deleteLast() {
      // TODO 删除文章————需要实现自己选择删除哪一篇
      this.deleteArticleAction(2);
    }
  }
}
</script>

<style lang="scss">
.text-content {
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
}
</style>